﻿<template>
  <baseUI :isShow="myConfig.isShow" :label="myConfig.label" :showLabel="myConfig.showLabel" :labelSpan="myConfig.labelSpan" :isRequired="myConfig.isRequired" :showErrMsg="showErrMsg" :errMsg="errMsg" :commonConfig="commonConfig">
    <span :class="(myConfig.isEnable ? 'span-show' : 'span-show-disabled') + (myConfig.other.isMulti ? ' multi':'')" :style="myConfig.myStyle">
      <template v-if="selectedText">
        <div class="div-text" v-if="myConfig.other.isMulti">
          <ul>
            <li v-for="(item, index) in selectedText" :key="index">
              <i>{{item}}</i>
            </li>
          </ul>
          <!-- {{selectedText.join(',')}} -->
        </div>
        <div v-else class="div-text-single">
          {{selectedText.length > 0 ? selectedText[0] : ''}}
        </div>
      </template>
      <span v-if="myConfig.isEnable" @click="handleEdit" class="span-button">
        <i class="el-icon-search"></i>
      </span>
      <span @click="handleView" class="span-button">
        <i class="el-icon-view"></i>
      </span>
    </span>
    <el-collapse v-model="activeNames" accordion v-if="isDesignMode">
      <el-collapse-item title="弹框设计" name="pop">
        <div style="padding:0 0 5px 0">
          <el-row :gutter="10">
            <el-col :span="22">
              <template v-if="myConfig.other.query">
                <el-input v-model="filter" v-if="myConfig.other.query.useDefault"></el-input>
                <template v-else>
                  <div style="border:1px dashed #999">
                    <draggable
                      style = "min-height: 50px;"
                      v-bind = "{group:{name: 'grid_'+ myConfig.uid, pull:true}, sort:true}"
                      v-model = "myConfig.other.query.conditions">
                      <template>
                        <div v-for="(el, i) in myConfig.other.query.conditions" :key = "i">
                          <div class="dynamic_single" @click.stop = "handleSelectComponent(el)">
                            <component :key="el.config.uid"
                              :ref="el.config.uid"
                              v-bind:is="el.componentName"
                              :config="el.config"
                              :commonConfig="commonConfig"
                              v-model="el.value"
                              :isDesignMode="true"
                              @onDesignEvent="handleEmbeddedDesignEvent"></component>
                          </div>
                          <div>
                            <el-button title = "删除" @click.stop = "handleQueryComponentDelete(i)" type = "danger" size = 'mini' round>
                              <i class="iconfont icon-shanchu"></i>
                            </el-button>
                          </div>
                        </div>
                      </template>
                    </draggable>
                    <add-component @addItem="addQueryItem"></add-component>
                  </div>
                </template>
              </template>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="onClickSearch">查询</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="query-content">
          <el-table v-if="myConfig.other.table"
            :data="tableData"
            ref="dTable"
            style="width: 98%;"
            :max-height="myConfig.other.table.height?myConfig.other.table.height:'400'"
            border
            stripe
            @sort-change="sortChange"
            @selection-change="handleSelectionChange">
            <el-table-column v-if="myConfig.other.isMulti" align="center" type="selection" width="55"></el-table-column>
            <el-table-column v-else align="center" width="55">
              <template slot-scope="scope">
                <input type="radio" name="selectedRow" :value="scope.$index" @click="handleTableCurrentChange(scope.row)"/>
              </template>
            </el-table-column>
            <el-table-column v-for="(col, index) in tableColumns" :key="index"
              :prop="col.name"
              :label="col.label"
              :width="col.width?col.width:'auto'"
              :sortable="col.sortable && col.sortCustom ? 'custom':col.sortable"
              align="center">
              <template slot-scope="scope">
                <template v-if="col._viewer.isComponent">
                  <component :key="col._viewer.component.config.uid"
                    v-bind:is="col._viewer.component.componentName"
                    :config="col._viewer.component.config"
                    :commonConfig="commonConfig"
                    :value.sync="scope.row[col.name]"
                    :isDesignMode="false"
                    @onDesignEvent="handleEmbeddedDesignEvent"></component>
                </template>
                <template v-else>
                  <span v-if="Object.keys(scope.row).indexOf(col.name + '__text') < 0">{{scope.row[col.name]}}</span>
                  <span v-else>{{scope.row[col.name + '__text']}}</span>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="padding: 10px 0 0 0">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync = "page"
              :page-size = 'pageSize'
              :pager-count = "5"
              :page-sizes = "[10, 25, 50, 100]"
              layout = "total, sizes, prev, pager, next"
              :total = 'rowTotal'>
            </el-pagination>
        </div>
        <div style="padding: 10px 0 0 0">
          <el-button type="primary" @click="submitSelected" v-if="myConfig.isEnable">确定</el-button>
          <el-button type="info" @click="cancelSelected" v-if="myConfig.isEnable">取消</el-button>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-dialog v-drag
        :closeOnClickModal="false"
        :visible.sync="showPop"
        append-to-body
        width="50%"
        class="pop"
        :before-close="handleShowPopClose">
      <el-form v-if="myConfig.other.dataSource">
        <el-form-item>
          <template>
            <div style="padding:0 0 5px 0">
              <el-row :gutter="10">
                <el-col :span="22">
                  <template v-if="myConfig.other.query">
                    <el-input v-model="filter" clearable v-if="myConfig.other.query.useDefault" @keyup.enter.native="onClickSearch"></el-input>
                    <template v-else>
                      <div v-for="(el, i) in myConfig.other.query.conditions" :key = "i">
                        <component :key="el.config.uid"
                          :ref="el.config.uid"
                          v-bind:is="el.componentName"
                          :config="el.config"
                          :events="el.events"
                          :commonConfig="commonConfig"
                          :value.sync="el.value"
                          :isDesignMode="false"
                          :pageModel.sync="queryModel"
                          :pageControl.sync="meControl"
                          :parentControl.sync="parentControl"
                          :parentModel="parentModel"
                          @onRuntimeEvent="onRuntimeEvent"
                          @keyup.enter.native="onClickSearch"></component>
                      </div>
                    </template>
                  </template>
                </el-col>
                <el-col :span="2">
                  <el-button type="primary" @click="onClickSearch">查询</el-button>
                </el-col>
              </el-row>
            </div>
            <div class="query-content">
              <el-table v-if="myConfig.other.table"
                :data="tableData"
                style="width: 98%;"
                :max-height="myConfig.other.table.height?myConfig.other.table.height:'400'"
                border
                stripe
                @sort-change="sortChange"
                @selection-change="handleSelectionChange">
                <el-table-column v-if="myConfig.other.isMulti" align="center" type="selection" width="55"></el-table-column>
                <el-table-column v-else align="center" width="55">
                  <template slot-scope="scope">
                    <el-radio v-model="selectedRow" :label="scope.$index" @change="handleTableCurrentChange(scope.row)"></el-radio>
                  </template>
                </el-table-column>
                <el-table-column v-for="(col, index) in tableColumns" :key="index"
                  :prop="col.name"
                  :label="col.label"
                  :width="col.width?col.width:'auto'"
                  :sortable="col.sortable && col.sortCustom ? 'custom':col.sortable"
                  align="center">
                  <template slot-scope="scope">
                    <template v-if="col._viewer.isComponent">
                      <component :key="col._viewer.component.config.uid"
                        v-bind:is="col._viewer.component.componentName"
                        :config="col._viewer.component.config"
                        :commonConfig="commonConfig"
                        :value.sync="scope.row[col.name]"
                        :isDesignMode="false"
                        @onDesignEvent="handleEmbeddedDesignEvent"></component>
                    </template>
                    <template v-else>
                      <span v-if="Object.keys(scope.row).indexOf(col.name + '__text') < 0">{{scope.row[col.name]}}</span>
                      <span v-else>{{scope.row[col.name + '__text']}}</span>
                    </template>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="padding: 10px 0 0 0">
              <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync = "page"
                  :page-size = 'pageSize'
                  :pager-count = "5"
                  :page-sizes = "[10, 25, 50, 100]"
                  layout = "total, sizes, prev, pager, next"
                  :total = 'rowTotal'>
                </el-pagination>
            </div>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitSelected" v-if="myConfig.isEnable">确定</el-button>
          <el-button type="info" @click="cancelSelected" v-if="myConfig.isEnable">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-drag
        :closeOnClickModal="false"
        :visible.sync="showView"
        append-to-body
        width="50%"
        class="pop"
        :before-close="handleViewPopClose">
      <el-form v-if="myConfig.other.dataSource">
        <el-form-item>
          <template>
            <div class="query-content">
              <el-table v-if="myConfig.other.table"
                :data="viewData"
                style="width: 98%;"
                :max-height="myConfig.other.table.height?myConfig.other.table.height:'400'"
                border
                stripe>
                <el-table-column v-for="(col, index) in tableColumns" :key="index"
                  :prop="col.name"
                  :label="col.label"
                  :width="col.width?col.width:'auto'"
                  align="center">
                  <template slot-scope="scope">
                    <template v-if="col._viewer.isComponent">
                      <component :key="col._viewer.component.config.uid"
                        v-bind:is="col._viewer.component.componentName"
                        :config="col._viewer.component.config"
                        :commonConfig="commonConfig"
                        :value.sync="scope.row[col.name]"
                        :isDesignMode="false"
                        @onDesignEvent="handleEmbeddedDesignEvent"></component>
                    </template>
                    <template v-else>
                      <span v-if="Object.keys(scope.row).indexOf(col.name + '__text') < 0">{{scope.row[col.name]}}</span>
                      <span v-else>{{scope.row[col.name + '__text']}}</span>
                    </template>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="padding: 10px 0 0 0">
              <el-pagination
                  background
                  @size-change="handleViewSizeChange"
                  @current-change="handleViewCurrentChange"
                  :current-page.sync = "pageView"
                  :page-size = 'pageSizeView'
                  :pager-count = "5"
                  :page-sizes = "[10, 25, 50, 100]"
                  layout = "total, sizes, prev, pager, next"
                  :total = 'rowTotalView'>
                </el-pagination>
            </div>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="cancelView">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </baseUI>
</template>
<script>
import baseComponent from '../baseComponent.vue'
import baseUI from '../baseUI.vue'
import Draggable from 'vuedraggable'
import addComponent from '../addComponent.vue'
import {commonUse_defaultMethod} from '../../commonUse'
import {getTableColumnViewerByName, getComponentNameByUIType} from '../common'
export default {
  components: {
    baseComponent, baseUI, addComponent, Draggable
  },
  mixins: [baseComponent],
  mounted () {
    this.init(this.config)
  },
  data () {
    return {
      showPop: false,
      showView: false,
      selectedText: [],
      activeNames: '',
      tableData: [],
      viewData: [],
      page: 1,
      pageSize: 10,
      rowTotal: 0,
      pageView: 1,
      pageSizeView: 10,
      rowTotalView: 0,
      sortExpress: {},
      selectedRows: [],
      selectedRow: null,
      filter: '',
      queryModel: {},
      meControl: {
        showInnerPop: false,
        innerPageUid: '',
        innerRowData: {},
        showOutPop: false,
        outPopUrl: '',
        refreshPage: false,
        reset: false
      }
    }
  },
  computed: {
    tableColumns: function () {
      // `this` 指向 vm 实例
      let list = this.myConfig.other.table.columns.filter(col => {
        return col.visible
      })
      list.sort((a, b) => {
        return a.sort - b.sort
      })
      list.forEach(item => {
        item._viewer = getTableColumnViewerByName(getComponentNameByUIType(item.ui_type))
      })
      return list
    }
  },
  methods: {
    load (data) {
    },
    isDataComponent () {
      return true
    },
    setValue (val) {
      if (val !== this.selectedValue) {
        this.selectedValue = val
        this.loadText()
        this.loadViewData()
      }
    },
    getText () {
      return this.selectedText.join(',')
    },
    loadText () {
      let self = this
      if (this.selectedValue) {
        self.selectedText = []
        if (this.parentModel && this.parentModel[this.myConfig.dataKey + '__text']) {
          this.selectedText.push(this.parentModel[this.myConfig.dataKey + '__text'])
        } else {
          if (!this.myConfig.other.dataSource) return
          if (this.myConfig.other.dataSource.remoteCategory === 'MetaPop' &&
            this.myConfig.other.dataSource.MetaPopSettings) {
            this.$api.getMDFormPopText({
              id: this.myConfig.other.dataSource.MetaPopSettings.table,
              column_name: this.myConfig.other.dataSource.MetaPopSettings.column,
              is_filter_deleted: this.myConfig.other.isFilterDeleted,
              value: this.myConfig.other.isMulti ? this.selectedValue.join(',') : this.selectedValue
            }).then(data => {
              if (data && data.data) {
                data.data.forEach(d => {
                  self.selectedText.push(d.text)
                })
              }
            })
          } else if (this.myConfig.other.dataSource.remoteCategory === 'Meta' &&
            this.myConfig.other.dataSource.MetaSettings) {
            if (this.myConfig.other.dataSource.MetaSettings.table &&
            this.myConfig.other.dataSource.MetaSettings.valueKey &&
            this.myConfig.other.dataSource.MetaSettings.textkey) {
              let fixed_filter_express = {}
              if (this.myConfig.other.isMulti) {
                fixed_filter_express[this.myConfig.other.dataSource.MetaSettings.valueKey] = {
                  $in: this.selectedValue
                }
              } else {
                fixed_filter_express[this.myConfig.other.dataSource.MetaSettings.valueKey] = this.selectedValue
              }
              this.$api.mdFormQuery({
                id: this.myConfig.other.dataSource.MetaSettings.table,
                limit: 1000,
                page: 1,
                fixed_filter_express: fixed_filter_express
              }).then(data => {
                if (data && data.data) {
                  data.data.forEach(d => {
                    self.selectedText.push(d[self.myConfig.other.dataSource.MetaSettings.textkey])
                  })
                }
              })
            }
          }
        }
      } else {
        this.selectedText = []
      }
    },
    loadTableData () {
      if (this.myConfig.other.dataSource.remoteCategory === 'MetaPop') {
        this.loadMetaPopData()
      } else if (this.myConfig.other.dataSource.remoteCategory === 'Meta') {
        this.loadMetaData()
      }
    },
    loadMetaPopData () {
      if (!this.myConfig.other.dataSource.MetaPopSettings.table) return
      let fixed_filter_express = {}
      let other_condition_express = {}
      let filter_value = ''
      let self = this
      if (this.myConfig.other.query) {
        if (this.myConfig.other.query.useDefault) {
          filter_value = this.filter
        } else {
          if (this.queryModel) {
            let keys = Object.keys(this.queryModel)
            keys.forEach(k => {
              if (this.queryModel[k].value) {
                if (other_condition_express[k]) {
                  other_condition_express[k] = {}
                }
                if (this.queryModel[k].componentName === 'DateRangePicker' ||
                  this.queryModel[k].componentName === 'DateTimeRangePicker' ||
                  this.queryModel[k].componentName === 'MonthRangePicker' ||
                  this.queryModel[k].componentName === 'TimeRangePicker') {
                  other_condition_express[k] = {
                    '$gte': this.queryModel[k].value[0],
                    '$lte': this.queryModel[k].value[1]
                  }
                } else {
                  other_condition_express[k] = this.queryModel[k].value
                }
              }
            })
          }
        }
      }
      this.myConfig.other.dataSource.MetaPopSettings.filterList.forEach(el => {
        if (el.column) {
          if (!fixed_filter_express[el.column]) {
            fixed_filter_express[el.column] = {}
          }
          fixed_filter_express[el.column][el.condition] = commonUse_defaultMethod(el.value, self.getDataObjFromPageModel(), null, null, self.parentModel)
        }
      })
      if (!self.sortExpress || Object.keys(self.sortExpress) <= 0) {
        self.sortExpress = {}
        this.myConfig.other.dataSource.MetaPopSettings.orderList.forEach(el => {
          if (el.column) {
            self.sortExpress[el.column] = el.direction
          }
        })
      }
      this.$api.mdFormQueryPop({
        id: this.myConfig.other.dataSource.MetaPopSettings.table,
        limit: this.pageSize,
        page: this.page,
        filter: filter_value,
        is_filter_deleted: this.myConfig.other.isFilterDeleted,
        column_name: this.myConfig.other.dataSource.MetaPopSettings.column,
        fixed_filter_express: fixed_filter_express,
        fixed_orderby_express: this.sortExpress,
        other_condition_express: other_condition_express,
        this_data: this.getDataObjFromPageModel(),
        ref_data: ''
      }).then(data => {
        this.tableData = data.data
        this.page = data.page
        this.pageSize = data.limit
        this.rowTotal = data.total_count
      })
    },
    loadMetaData () {
      if (!this.myConfig.other.dataSource.MetaSettings.table) return
      let fixed_filter_express = {}
      let other_condition_express = {}
      let filter_column = ''
      let filter_value = ''
      let self = this
      if (this.myConfig.other.query) {
        if (this.myConfig.other.query.useDefault) {
          filter_column = this.myConfig.other.query.filterColumns.join(',')
          filter_value = this.filter
        } else {
          if (this.queryModel) {
            let keys = Object.keys(this.queryModel)
            keys.forEach(k => {
              if (this.queryModel[k].value) {
                if (other_condition_express[k]) {
                  other_condition_express[k] = {}
                }
                if (this.queryModel[k].componentName === 'DateRangePicker' ||
                  this.queryModel[k].componentName === 'DateTimeRangePicker' ||
                  this.queryModel[k].componentName === 'MonthRangePicker' ||
                  this.queryModel[k].componentName === 'TimeRangePicker') {
                  other_condition_express[k] = {
                    '$gte': this.queryModel[k].value[0],
                    '$lte': this.queryModel[k].value[1]
                  }
                } else {
                  other_condition_express[k] = this.queryModel[k].value
                }
              }
            })
          }
        }
      }
      this.myConfig.other.dataSource.MetaSettings.filterList.forEach(el => {
        if (el.column) {
          if (!fixed_filter_express[el.column]) {
            fixed_filter_express[el.column] = {}
          }
          fixed_filter_express[el.column][el.condition] = commonUse_defaultMethod(el.value, self.getDataObjFromPageModel(), null, null, self.parentModel)
        }
      })
      if (!self.sortExpress || Object.keys(self.sortExpress) <= 0) {
        self.sortExpress = {}
        this.myConfig.other.dataSource.MetaSettings.orderList.forEach(el => {
          if (el.column) {
            self.sortExpress[el.column] = el.direction
          }
        })
      }
      this.$api.mdFormQuery({
        id: this.myConfig.other.dataSource.MetaSettings.table,
        limit: this.pageSize,
        page: this.page,
        filter_column: filter_column,
        filter_value: filter_value,
        fixed_orderby_express: this.sortExpress,
        fixed_filter_express: fixed_filter_express,
        other_condition_express: other_condition_express
      }).then(data => {
        this.tableData = data.data
        this.page = data.page
        this.pageSize = data.limit
        this.rowTotal = data.total_count
      })
    },
    handleShowPopClose () {
      this.showPop = false
    },
    handleEdit () {
      if (this.isDesignMode) {
        this.activeNames = 'pop'
      } else {
        this.showPop = true
        this.loadTableData()
      }
    },
    submitSelected () {
      if (this.isDesignMode) {
        this.activeNames = ''
      } else {
        this.showPop = false
      }
    },
    cancelSelected () {
      this.showPop = false
    },
    handleSelectComponent (item) {
      this.onDesignEvent('selectItem', item)
    },
    handleQueryComponentDelete (index) {
      this.myConfig.other.query.conditions.splice(index, 1)
    },
    addQueryItem (item) {
      let d = item
      d.config.other.parentUid = this.myConfig.uid
      this.myConfig.other.query.conditions.push(d)
      this.handleSelectComponent(this.myConfig.other.query.conditions[this.myConfig.other.query.conditions.length - 1])
    },
    onClickSearch () {
      this.loadTableData()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.loadTableData()
    },
    handleCurrentChange (val) {
      this.page = val
      this.loadTableData()
    },
    handleViewSizeChange (val) {
      this.pageSizeView = val
      this.loadViewData()
    },
    handleViewCurrentChange (val) {
      this.pageView = val
      this.loadViewData()
    },
    sortChange (e) {
      var col = this.myConfig.other.table.columns.find(item => {
        return item.name === e.prop
      })
      if (col && col.sortCustom) {
        this.sortExpress = {}
        if (e.order) {
          if (e.order && e.order === 'ascending') {
            this.sortExpress[e.prop] = 'asc'
          } else {
            this.sortExpress[e.prop] = 'desc'
          }
        }
        this.loadTableData()
      }
    },
    handleEmbeddedDesignEvent (event, sender, targetData) {
      this.$emit('onDesignEvent', event, sender, targetData)
    },
    // 多选
    handleSelectionChange (val) {
      if (this.myConfig.other.isMulti) {
        this.selectedRows = val
        this.selectedText = []
        let self = this
        let arr = []
        let settings = null
        if (this.myConfig.other.dataSource.remoteCategory === 'MetaPop') {
          settings = self.myConfig.other.dataSource.MetaPopSettings
        } else if (this.myConfig.other.dataSource.remoteCategory === 'Meta') {
          settings = self.myConfig.other.dataSource.MetaSettings
        }
        val.forEach(r => {
          if (Object.keys(r).indexOf(settings.valueKey) >= 0) {
            arr.push(r[settings.valueKey])
          }
          if (Object.keys(r).indexOf(settings.labelKey) >= 0) {
            let textkey = settings.labelKey + '__text'
            if (Object.keys(r).indexOf(textkey) >= 0) {
              this.selectedText.push(r[textkey])
            } else {
              self.selectedText.push(r[settings.labelKey])
            }
          }
        })
        this.selectedValue = arr
      }
    },
    // 单选
    handleTableCurrentChange (val) {
      if (!this.myConfig.other.isMulti) {
        let arr = []
        this.selectedText = []
        arr.push(val)
        this.selectedRows = arr
        let settings = null
        if (this.myConfig.other.dataSource.remoteCategory === 'MetaPop') {
          settings = this.myConfig.other.dataSource.MetaPopSettings
        } else if (this.myConfig.other.dataSource.remoteCategory === 'Meta') {
          settings = this.myConfig.other.dataSource.MetaSettings
        }
        if (Object.keys(val).indexOf(settings.valueKey) >= 0) {
          this.selectedValue = val[settings.valueKey]
        }
        if (Object.keys(val).indexOf(settings.labelKey) >= 0) {
          let textkey = settings.labelKey + '__text'
          if (Object.keys(val).indexOf(textkey) >= 0) {
            this.selectedText.push(val[textkey])
          } else {
            this.selectedText.push(val[settings.labelKey])
          }
        }
      }
    },
    loadViewData () {
      if (this.myConfig.other.dataSource.remoteCategory === 'MetaPop' &&
        this.myConfig.other.dataSource.MetaPopSettings &&
        this.myConfig.other.dataSource.MetaPopSettings.valueKey) {
        let fixed_filter_express = {}
        if (this.myConfig.other.isMulti) {
          fixed_filter_express[this.myConfig.other.dataSource.MetaPopSettings.valueKey] = {
            $in: this.selectedValue
          }
        } else {
          fixed_filter_express[this.myConfig.other.dataSource.MetaPopSettings.valueKey] = this.selectedValue
        }
        this.$api.mdFormQueryPop({
          id: this.myConfig.other.dataSource.MetaPopSettings.table,
          limit: this.pageSizeView,
          page: this.pageView,
          is_filter_deleted: this.myConfig.other.isFilterDeleted,
          column_name: this.myConfig.other.dataSource.MetaPopSettings.column,
          fixed_filter_express: fixed_filter_express,
          this_data: this.getDataObjFromPageModel(),
          ref_data: ''
        }).then(data => {
          this.viewData = data.data
          this.pageView = data.page
          this.pageSizeView = data.limit
          this.rowTotalView = data.total_count
        })
      } else if (this.myConfig.other.dataSource.remoteCategory === 'Meta' &&
        this.myConfig.other.dataSource.MetaSettings) {
        if (this.myConfig.other.dataSource.MetaSettings.table &&
        this.myConfig.other.dataSource.MetaSettings.valueKey) {
          let fixed_filter_express = {}
          if (this.myConfig.other.isMulti) {
            fixed_filter_express[this.myConfig.other.dataSource.MetaSettings.valueKey] = {
              $in: this.selectedValue
            }
          } else {
            fixed_filter_express[this.myConfig.other.dataSource.MetaSettings.valueKey] = this.selectedValue
          }
          this.$api.mdFormQuery({
            id: this.myConfig.other.dataSource.MetaSettings.table,
            limit: this.pageSizeView,
            page: this.pageView,
            fixed_filter_express: fixed_filter_express
          }).then(data => {
            this.viewData = data.data
            this.pageView = data.page
            this.pageSizeView = data.limit
            this.rowTotalView = data.total_count
          })
        }
      }
    },
    handleView () {
      this.loadViewData()
      this.showView = true
    },
    cancelView () {
      this.viewData = []
      this.showView = false
    },
    handleViewPopClose () {
      this.cancelView()
    }
  },
  watch: {
    'myConfig.other.isMulti': {
      handler: function (val, oldVal) {
        if (this.isDesignMode) {
          this.$nextTick(() => {
            this.$refs['dTable'].doLayout()
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.span-show {
  display: flex;
  min-height: 30px!important;
  height: 30px;
  width: 100%;
  border: 1px solid #c0ccda;
  border-radius: 3px;
}
.span-show-disabled {
  display: flex;
  min-height: 30px!important;
  height: 30px;
  width: 100%;
  border: 1px solid #e4e7ed;
  color: #333 !important;
  border-radius: 3px;
  background-color: #f5f7fa;
}
.multi {
  height: 60px!important;
}
.div-text {
  margin: 0 5px 0 0;
  width: 100%;
  overflow-y: auto;
  font-size: 15px;
}
.div-text-single {
  margin: 0 5px 0 0;
  width: 100%;
  overflow-y: hidden;
  font-size: 15px;
}

.span-button {
  font-size: 15px;
  width: 50px;
  display: flex;
  justify-content: center;
  border-left: 1px solid #c0ccda;
  background-color: #f5f7fa;
  cursor: pointer;
}
.span-button i {
  top: 30%;
  position: relative;
}
.query-content {
  display: flex;
  padding: 10px 0 0 0;
  justify-content: center;
  .c2 {
    width: 100%;
  }
}
.query-label {
  float:left;
}
.query-input {
  float: right;
}
.pop {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    .el-dialog__body {
      max-height: 70vh;
      overflow-y: auto;
    }
  }
}
</style>
